<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="vue.js"></script>
  <title>Vue Test</title>
</head>
<style>
  .data {
    font-family: '微软雅黑';
    font-size: 24px;
    color: brown;
  }

  .div {
    border: 1px solid gray;
    margin-top: 5px;
  }
</style>

<body>
  <div id="vue">
    <div v-if=flag>
      <p class="data">{{ data }}</p>
      <!-- v-bind:xx 可以缩写为 :xx -->
      <!-- v-on:xx 可以缩写为 @xx -->
      <my-component v-bind:number="10" date="data"></my-component>
    </div>
    <!-- v-else 必须和v-if/v-else-if 配套使用 -->
    <div v-else>
      <p class="data">{{ data }}</p>
      <!-- 只是单纯的赋值 不能使用v-bind, Number类型除外 -->
      <my-component v-bind:number="50" date="数据"></my-component>
    </div>
    <!-- 没有添加 key 属性的元素会被高效地复用(不会重新渲染) -->
    <div name='key管理可复用元素' class="div">
      <div v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
        <!-- <input placeholder="Enter your username" key="username-input"> -->
      </div>
      <div v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
        <!-- <input placeholder="Enter your email address" key="email-input"> -->
      </div>
      <button @click="trigger">trigger</button>
    </div>
    <!-- v-show: 初始时渲染 切换状态只是简单的改变CSS的display属性 -->
    <div name='v-show' class="div">
      <div v-show="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
        <!-- <input placeholder="Enter your username" key="username-input"> -->
      </div>
      <button @click="trigger">switch</button>
    </div>

    <!-- v-for -->
    <!-- v-for 数组 -->
    <div class="div">
      <ul>
        <!-- in 可以使用 of 替换 -->
        <li v-for="(item, index) in items" ::key="item.id">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
    </div>
    <!-- v-for 对象 -->
    <div class="div">
      <ul>
        <li v-for="(value, key, index) in object">
          {{index}}. {{ key }} - {{ value }}
        </li>
      </ul>
    </div>
    <!-- HTML 中的模板名必须是短横线形式的 -->
    <local-template></local-template>
  </div>
</body>
<script>
  // 确保在初始化根实例之前注册组件
  Vue.component('my-component', {
    template: '<div><h1>{{ msg }}</h1><h2>Prop验证：{{ number }}</h2><h2>prop当做局部数据：{{ local }}</h2><h2>默认值:{{ string }}</h2></div>',
    props: ['number', 'string', 'date'],
    props: {
      number: Number,
      string: {
        type: String,
        // required: true
        default: 'default'
      },
      // 自定义验证器 如果是开发版本会产生警告信息
      date: {
        validator: function (value) {
          return value.length >= 2
        }
      }
    },
    // 组件的data必须是一个函数
    data() {
      return {
        msg: 'Hello Vue!',
        local: this.date
      }
    }
  })
  // 声明一个组件对象
  var template = {
    template: '<div><h1>{{ msg }}</h1></div>',
    data() {
      return {
        msg: '子组件'
      }
    }
  }
  var vue = new Vue({
    el: '#vue',
    data: {
      data: "父组件数据",
      flag: false,
      loginType: 'username',
      parentMessage: 'Parent',
      items: [
        {
          id: 1,
          message: "Foo"
        },
        {
          id: 2,
          message: "Bar"
        }
      ],
      object: {
        firstName: 'Sone',
        lastName: 'Winstone',
        age: '22'
      }
    },
    // 局部注册组件 注意这里组件名要有引号
    components: {
      'localTemplate': template
    },
    methods: {
      trigger() {
        if (this.loginType === 'username') {
          this.loginType = 'email'
        } else {
          this.loginType = 'username'
        }
      }
    }
  })
</script>

</html>